<!-- Composition API syntax -->
<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, computed, getCurrentInstance, onMounted } from "vue";
import _ from "lodash";

const instance: any = getCurrentInstance();
const { ctx, proxy } = getCurrentInstance() as any; //ctx 只能用于开发环境，生产环境用 proxy
console.log("ctx: ", ctx);
console.log("proxy: ", proxy);

// #变量声明
const nums = ref(0);

// const data = {   //引用类型需要用reactive函数,否则数据改变不会立即响应,其他数据有响应式改变时,它才会变
//   message: "vue",
//   myTitle: "title",
//   myHref: "href",
//   linkUrl: "http://www.baidu.com",
// }

const data = reactive({
  message: "响应式的",
  myTitle: "title",
  myHref: "href",
  linkUrl: "http://www.baidu.com",
});

// #computed
const showGoods = computed(() => {
  return "computed";
});

// #事件
const setNum = () => {
  nums.value++;
  //   console.log(nums);
};
function setMsg() {
  data.message = "hello vue3 ";
  // console.log(data.message);
}

// 注册一个局部的自定义指令，需要以小写v开头
const vFocus = {
  beforeMount(el: any) {
    // console.log(el, "created");
    var array = [1];
    var other = _.concat(array, 2, [3], [[4] as any]);
    // console.log(other);    // => [1, 2, 3, [4]]
    // console.log(array);
  },
  mounted(el: any, binding: any) {
    // console.log(el, binding, "mounted");
    el.focus();
  },
};
// 导入的指令同样能够工作，并且能够通过重命名来使其符合命名规范
// import { myDirective as vMyDirective } from './MyDirective.js'

// #router 路由
const router = useRouter();
const location = useRoute();

onMounted(() => {});
</script>

<template>
  <div class="syntax">
    <h2>vue3 语法</h2>
    <h2>{{ data.message }}</h2>
    <h2>{{ nums }}</h2>
    <button type="button" @click="setMsg">设置msg</button>
    <button type="button" @click="setNum">设置num</button>
    <input
      v-focus
      class="testDr"
      type="text"
      name="testDr"
      id="testDr"
      placeholder="etst"
    />
  </div>

  <!-- slot 用法 -->
  <!-- <tab-bar>
    <template v-slot:item-icon>
      <img src="~assets/img/tabbar/home.png" alt="" />
    </template>
  </tab-bar> -->
</template>

<style lang="less"></style>
